<template>
  <div>
    <customSearch ref="customSearch" placeholder="请输入企业名称" title="事故列表" :total="total" @search="handleSearch" @superSearch="openSuperSearch" />
    <div>
      <div v-if="listData.length > 0" class="common_list">
        <div v-for="(item, index) in listData" :key="index" class="list_item" @click="goToDetails(item)">
          <div class="content_area">
            <div class="number_order">{{ index + 1 }}</div>
            <div class="right_content">
              <div class="content_title" style="max-width: 100%">
                {{ item.eventName }}
                <span>{{ item.eventLevel }}</span>
              </div>
              <ul>
                <li>
                  <i class="iconfont c-text-color1">&#xe725;</i>
                  <div class="label">企业名称：</div>
                  <div class="value">{{ item.companyName }}</div>
                </li>
                <li>
                  <i class="iconfont c-text-color2">&#xe6bb;</i>
                  <div class="label">事故类别：</div>
                  <div class="value">{{ item.eventType }}</div>
                </li>
                <!-- <li>
                  <i class="iconfont c-text-color3">&#xe67a;</i>
                  <div class="label">人员伤亡情况：</div>
                  <div class="value">{{ item.eventDeath }}</div>
                </li> -->
                <li>
                  <i class="iconfont c-text-color4">&#xe685;</i>
                  <div class="label">事故发生时间：</div>
                  <div class="value">{{ item.eventTime }}</div>
                </li>
                <li>
                  <i class="iconfont c-text-color5">&#xe685;</i>
                  <div class="label">事件发生地点：</div>
                  <div class="value">{{ item.eventPlace }}</div>
                </li>
                <li>
                  <i class="iconfont c-text-color6">&#xe685;</i>
                  <div class="label">事件来源：</div>
                  <div class="value">{{ item['eventSource'] }}</div>
                </li>
                <li>
                  <i class="iconfont c-text-color7">&#xe685;</i>
                  <div class="label">审核状态：</div>
                  <div class="value">{{ item['auditResult'] }}</div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <customLoadmore ref="customLoadmore" :page-num="form.pageNum" :pages="pages" @load="handlePages" />
    </div>
    <van-popup v-model="superSearch" position="right" :style="{ width: '90%', height: '100%' }" lock-scroll close-on-popstate closeable class="custom-van-pop">
      <div class="pop-vertical-flex">
        <div class="pop-content">
          <div class="customPopCheckbox">
            <div class="checkbox-title">事故名称</div>
            <el-input v-model="form.eventName" placeholder="请输入事故名称" size="small" style="margin-bottom: 10px" />
          </div>
          <custom-timer title="事故发生时间" type="date" :start.sync="form.startTime" :end.sync="form.endTime" />
          <!-- <customPopCheckbox :list="sourceArr" :check-value.sync="form.eventSource" title="数据来源" /> -->
          <customPopCheckbox :list="selectOptionAll['安全-事故等级']" :check-value.sync="form.eventLevel" title="事故等级" />
          <customPopCheckbox :list="selectOptionAll['安全-事故类别']" :check-value.sync="form.eventType" title="事故类别" />
        </div>
        <div class="pop-bottom">
          <van-button type="default" @click="resetSuperSearch">清空</van-button>
          <van-button type="info" @click="handleSuperSearch">确认</van-button>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import commonList from '@/assets/mixin/commonList'
import { aqAccidentList } from '@/api/commonPage/AccidentEvents'
import { currentTime } from '@/utils/dayJs'

export default {
  mixins: [commonList],
  data() {
    return {
      form: {
        pageNum: 1,
        pageSize: 10,
        // eventName: '',
        eventName: '', // 事故名称
        eventSource: '', // 事故来源
        eventType: '',
        eventLevel: '',
        companyName: '',
        companyIds: -1,
        timeSelVal: '自定义',
        startTime: currentTime('年') + '-01-01',
        endTime: currentTime('年月日')
      },
      sourceArr: [
        {
          label: '集团新增',
          name: '集团新增',
          value: '集团新增',
          disabled: false
        },
        {
          label: '企业新增',
          name: '企业新增',
          value: '企业新增',
          disabled: false
        }
      ],
      kindArr: [],
      levelArr: [],
      current: '',
      listData: []
    }
  },
  watch: {
    $route(to, form) {
      if (to.query.auditResult) {
        this.listData.forEach(v => {
          if (to.query.environmentEventId === v.environmentEventId) {
            v.auditResult = to.query.auditResult
          }
        })
      }
    }
  },
  mounted() {
    const { current } = this.$route.query
    if (current) {
      this.current = current
    }
    this.companyList()
  },
  methods: {
    tagChange(tagArg) {
      const { label } = tagArg.item
      this.active = label
    },
    // 分页
    handlePages(value) {
      this.form.pageNum = value
      this.companyList()
    },
    // 企业名称查询
    handleSearch(value) {
      this.form.companyName = value
      this.form.pageNum = 1
      this.listData = []
      this.companyList()
    },
    // 高级查询
    handleSuperSearch() {
      this.superSearch = false
      this.form.pageNum = 1
      this.listData = []
      this.companyList()
    },
    // 级联选择器选择变化
    cascadeChange(args) {
      this.form.industryType = args.selectedOptions[args.selectedOptions.length - 1].text || ''
    },
    // 重置
    resetSuperSearch() {
      // this.$refs.customPopCascade.clearCascader()
      // this.form.category = ''
      // this.form.industryType = ''
      // 重置输入框查询
      this.$refs.customSearch.restore()
      this.form.endTime = this.form.startTime = ''
      this.form.eventName = this.form.eventType = this.form.eventLevel = this.form.eventSource = ''
    },
    // 跳转详情
    goToDetails(item) {
      const { environmentEventId } = item
      this.$router.push({
        path: '/staging/AccidentEventsDetail',
        query: { environmentEventId, current: this.current, active: '事故事件' }

      })
    },
    // 返回工作台
    back() {
      this.$router.push({
        path: '/staging/monitor',
        query: { current: this.current }
      })
    },
    // 获取企业列表数据
    async companyList() {
      this.$refs.customLoadmore.loadStatus = true
      // this.layout.showLoading()
      const { status, data } = await aqAccidentList(this.form)
      if (status === 0 && data) {
        this.total = data.total
        this.listData = this.listData.concat(data.list)
        this.pages = data.pages
      }
      this.$refs.customLoadmore.loadStatus = false
      // this.layout.hideLoading()
    }
  }
}
</script>

<style lang="scss" scoped>
.checkbox-title {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 30px;
}
</style>
